<template>
  <div class="section-chart-wrapper">
    <MChart ref="lineChart" class="line"></MChart>
  </div>
</template>
<script>
/**
 *@desc 断面流量 断面车速     虚线图表
 @author 邓清波
 * **/
export default {
  name: 'DashedLine'
}
</script>
<script setup>
import { onMounted, ref, watch } from 'vue'
import { positionTips } from '@/utils/chartPositionTips'

const props = defineProps({
  renderType: {
    type: String,
    default: '拥挤程度' // 拥堵预测
  },
  seriesData: {
    type: Array,
    default: () => [],
    required: true
  },
  xDate: {
    type: Array,
    default: () => [],
    required: true
  }
})

const lineChart = ref(null) // 图表实例

onMounted(() => {
  lineChart.value.init(getOptions())
})

watch(
  () => props.seriesData,
  () => {
    console.log('watch')
    lineChart.value.init(getOptions())
  },
  { deep: true }
)

/**
 * 获取charts配置对象
 * **/
function getOptions() {
  const legend =
    props.renderType == '拥挤程度'
      ? {
        show: false
      }
      : {
        icon: 'diamond',
        itemHeight: 10,
        itemWidth: 10,
        right: 0,
        padding: [5, 0],

        top: 0
      }

  const baseServie = {
    type: 'line',
    // stack: 'Total',
    data: [],
    symbolSize: 0,
    lineStyle: {
      type: 'dashed',
      width: 2
    },
    smooth: true
  }
  const series = props.seriesData.map(i => {
    return {
      ...baseServie,
      ...i
    }
  })

  const option = {
    tooltip: {
      trigger: 'axis',
      position: positionTips

    },
    legend,
    grid: {
      left: '0%',
      right: '1%',
      bottom: '2.5%',
      top: props.renderType == '拥挤程度' ? '7%' : '18%',
      containLabel: true
    },
    toolbox: {
      show: false
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      data: props.xDate
    },
    yAxis: {
      type: 'value',
      min: 0, // 配置 Y 轴刻度最小值
      splitNumber: 4,
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#7e8690'
        }
      }
    },
    series
  }
  return option
}
</script>
<style lang="less" scoped>
@import url(../../styles/themes/index.less);

.section-chart-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .chart-title {
    font-size: 14px;
    color: #333333;
  }

  .count-same {
    display: flex;
    width: 100%;

    .count-box {
      width: 140px;

      .count {
        width: 160px;
        height: 22px;
        font-size: 32px;
        text-align: left;
        color: @primary-color;
        letter-spacing: 0.8px;
      }
    }

    .same {
      flex: 1;
    }
  }

  .line {
    flex: 1;
  }
}
</style>
